import { Popover, Button, Tree } from 'antd';
import { SettingOutlined } from "@ant-design/icons";
import { useState } from "react";

export interface TableColumnSettingProp {
  columns: any[];
  selectColumns?: string[];
  onChange?: (columns: string[]) => void;
}

export default function TableColumnSetting(props: TableColumnSettingProp) {
  const columns = props.columns;
  const selectColumns = props.selectColumns || [];
  const [checkedKeys, setCheckedKeys] = useState<string[]>(selectColumns);

  const onSelect = (selectedKeys: any, info: any) => {
    console.log('selected', selectedKeys, info);
  };

  const onCheck = (checkedKeys: any, info: any) => {
    console.log('onCheck', checkedKeys, info);
    setCheckedKeys(checkedKeys);
    if (props.onChange) props.onChange(checkedKeys);
  };

  const content = <Tree
    checkable
    onSelect={onSelect}
    onCheck={onCheck}
    treeData={columns}
    checkedKeys={checkedKeys}
  />

  return (
    <Popover content={content} trigger="click" placement={"bottomLeft"}>
      <a className="ui-hover-text" onClick={e => e.preventDefault()}>
        <SettingOutlined />
      </a>
    </Popover>
  )
}